<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper
					activeColor="#f29100"
					ref="tabs"
					:list="list"
					:show-bar="showBar"
					:current="current"
					@change="change"
					:is-scroll="false"
					swiperWidth="750"
				></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @change="changeSwiper" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer == false"><ordernull /></block>
							<block v-else>
								<view class="order" v-for="(res, index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待付款</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left"><image :src="$url + item.img" mode="aspectFill"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{ res.addtime }}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ res.countmoney }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
										<view class="exchange btn">继续购买</view>
										<view class="exchange btn" @click="del(res.id, index)">撤销订单</view>
										<view class="evaluate btn" @click="pay">立即支付</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer == false"><ordernull /></block>
							<block v-else>
								<view class="order" v-for="(res, index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待发货</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left"><image :src="$url + item.img" mode="aspectFill"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{ res.addtime }}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ priceInt(res.countmoney) }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
										<view class="logistics btn">继续购买</view>
										<view class="exchange btn">撤销订单</view>
										<view class="evaluate btn">提醒发货</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<block v-if="dataBuffer == false"><ordernull /></block>
							<block v-else>
								<view class="order" v-for="(res, index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待确认</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left"><image :src="$url + item.img" mode="aspectFill"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{ res.addtime }}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ res.countmoney }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
										<view class="exchange btn">继续购买</view>
										<view class="exchange btn">撤销订单</view>
										<view class="evaluate btn">确认收货</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer == false"><ordernull /></block>
							<block v-else>
								<view class="order" v-for="(res, index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right" v-if="res.status == 0">待支付</view>
										<view class="right" v-else-if="res.status == 1">待发货</view>
										<view class="right" v-else-if="res.status == 2">待收货</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index">
										<view class="left"><image :src="$url + item.img" mode="aspectFill"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{ res.addtime }}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ priceInt(res.countmoney) }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
										<block v-if="res.status == 0">
											<view class="exchange btn">继续购买</view>
											<view class="exchange btn" @click="del(res.id, index)">撤销订单</view>
											<view class="evaluate btn">立即支付</view>
										</block>
										<block v-else-if="res.status == 1">
											<view class="logistics btn">继续购买</view>
											<view class="exchange btn">撤销订单</view>
											<view class="evaluate btn">提醒发货</view>
										</block>
										<block v-else-if="res.status == 2">
											<view class="logistics btn">查看物流</view>
											<view class="exchange btn">撤销订单</view>
											<view class="evaluate btn">确认收货</view>
										</block>
									</view>
								</view>
								<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
// 引入订单为空提示组件
import ordernull from '@/components/ordernull/ordernull.vue';

export default {
	components: { ordernull },
	data() {
		return {
			showBar: true, //初始化底部滑块开关
			orderList: [], //初始化订单列表数据

			dataBuffer: true, //数据展示开关
			list: [
				{
					name: '待付款'
				},
				{
					name: '待发货'
				},
				{
					name: '待收货'
				},
				{
					name: '全部订单'
				}
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			loadStatus: 'loadmore',
			status: 0, //订单状态，0是待支付 1是待发货  2待确认 3待评价 4订单完成 5订单取消
			page: 1,
			size: 5,
			totalPage: ''
		};
	},
	onLoad(option) {
		console.log('支付宝买家账号：exnylw8467@sandbox.com,支付宝登录密码 ：111111,支付宝支付密码：111111');
		// 兼容百度小程序
		// #ifdef MP-BAIDU
		this.showBar = false;
		// #endif

		// 处理不同的订单状态 （默认请求状态是0的数据）
		let status = option.status || 0;
		if (status != 0) {
			// 给轮播图和选项卡current赋值
			this.swiperCurrent = status;
			this.current = status;
			//重写订单状态
			this.status = status;
		}

		//检测是否登录 登录就调用方法 否则提示登录
		if (uni.getStorageSync('userInfo')) {
			this.getList();
		} else {
			this.$tip.login();
		}
	},
	computed: {
		// 价格小数
		priceDecimal() {
			return val => {
				if (val !== parseInt(val)) return val.slice(-2);
				else return '00';
			};
		},
		// 价格整数
		priceInt() {
			return val => {
				if (val !== parseInt(val)) return val.split('.')[0];
				else return val;
			};
		}
	},

	methods: {
		// 点击tab栏切换
		change(index) {
			// tab切换时，我们需要先将数据清空 再请求数据
			this.status = index; //切换状态
			this.page = 1; //重置为第一页
			this.loadStatus = 'loadmore'; //重置加载状态
			this.dataBuffer = true; //重置数据展示开关
			this.orderList = []; //重置数据
			// console.log(index);
			// console.log(this.status);
			this.getList(); //请求新数据

			// 兼容支付宝小程序
			// #ifdef MP-ALIPAY
			this.current = index;
			// #endif
			this.swiperCurrent = index;
		},

		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		//左右滑动滑块  为防止请求两次数据 如果source==touch 则使用的是左右滑动滑块
		changeSwiper({ detail: { current, source } }) {
			if (source == 'touch') {
				this.status = current;
				this.page = 1; //重置为第一页
				this.loadStatus = 'loadmore'; //重置加载状态
				this.dataBuffer = true; //重置数据展示开关
				this.orderList = []; //重置数据
				this.getList(); //请求新数据
				// console.log(this.status);

				// 兼容支付宝小程序
				// #ifdef MP-ALIPAY
				this.current = current;
				// #endif
				this.swiperCurrent = current;
			}
		},
		getList() {
			let uid = uni.getStorageSync('userInfo').uid;
			this.$http({
				url: 'orderlist',
				data: {
					uid,
					page: this.page,
					size: this.size,
					status: this.status
				}
			}).then(res => {
				if (res.list == null) {
					this.dataBuffer = false;
				} else {
					//检测是否有更多数据
					if (res.list.totalPage == 1) {
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
					}
					this.orderList = this.orderList.concat(res.list.data);
					this.totalPage = res.list.totalPage;
				}
			});
		},
		//监听下拉触底加载更多
		reachBottom() {
			if (this.page < this.totalPage) {
				this.$tip.tip('加载中...');
				this.loadStatus = 'loading';
				this.timer = setInterval(() => {
					this.page++, this.getList();
				}, 1000);
			} else {
				this.$tip.tip('没有更多订单了！');
				this.loadStatus = 'nomore';
				clearInterval(this.timer);
			}
		},
		del(id, index) {
			console.log(id, index);
			this.orderList.splice(index, 1);
		},
		pay() {
			// uni.redirectTo({
			// 	url: '../pay/pay?outTradeNo=' + res.list.outTradeNo
			// });
		}
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss" scoped>
// 引入样式
@import '@/static/css/order.scss';
</style>
